<template>
	<view class="content">
		<div class="my_work_box" id="myworkbox" @touchmove.stop.prevent="() => {}">
			<div class="titlebox">
				<text style="color: white;font-size: 21px;font-weight:bold">广场</text>
			</div>
		</div>
		<scroll-view class="public_box" scroll-y="true" show-scrollbar="false">
			<div style="width: 97%;display: flex;flex-direction: row;margin: auto;">
				<div class="meg_box" @click="tostudy()">
					<text style="font-size: 18px;color:#007aff;font-weight: bold;">复习资料</text>
				</div>
				<div style="display: flex;flex-direction: column;width: 50%;height: 100%;">
					<div class="meg_box_second" @click="toformdownload()">
						<text style="font-size: 16px;color:white;font-weight: bold;">各类表格</text>
					</div>
					<div class="meg_box_third" @click="tonoticedownload()">
						<text style="font-size: 16px;color:white;font-weight: bold;">通知文件</text>
					</div>
				</div>
			</div>
			<div
				style="margin: auto;border-radius: 10px;margin-top: 10px;width: 97%;display: flex;flex-direction: row;justify-content: space-around;background-color: white;">
				<div class="func_item" v-for="item in func_List" @click="tofunc(item.page,item.title)">
					<image style="width: 65rpx;height: 65rpx;" :src="item.icon"></image>
					<text style="font-size: 28rpx;">{{item.title}}</text>
				</div>
			</div>
			<div class="thing_box">
				<div v-if="interestnews" class="thing_item">
					<div class="thing_title">
						<p style="margin-left: 5px;">你可能感兴趣：</p>
						<p style="margin-right: 5px;">{{ interestnews }}条新事件></p>
					</div>
					<div class="things">
						<p style="font-weight: bold;margin-left: 5px;">竞赛通知</p>
						<p style="margin-left: 10px;color: gray;">这是一条竞赛通知</p>
					</div>
				</div>
				<div class="thing_item" @click="toeventList(1)">
					<div class="thing_title">
						<p style="margin-left: 5px;">今日新增事件：</p>
						<p style="margin-right: 5px;">{{ news }}条新事件></p>
					</div>
					<div v-for="item in neweventList.slice(0,3)" class="things">
						<p style="font-weight: bold;margin-left: 5px;">{{item.type}}通知</p>
						<p style="margin-left: 10px;color: gray;">{{item.title}}</p>
					</div>
				</div>
				<div class="thing_item" @click="toeventList(2)">
					<div class="thing_title">
						<p style="margin-left: 5px;">最近热点事件：</p>
						<p style="margin-right: 5px;">查看全部事件></p>
					</div>
					<div v-for="item in effectiveList.slice(0,3)" class="things">
						<p style="font-weight: bold;margin-left: 5px;">{{item.type}}通知</p>
						<p style="margin-left: 10px;color: gray;">{{item.title}}</p>
					</div>
				</div>
			</div>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage() {},
		onShareTimeline() {},
		data() {
			return {
				news: 0,
				hotnews: 0,
				interestnews: 0,
				eventList: [],
				effectiveList: [],
				neweventList: [],
				func_List:[
					{
						icon:'/static/study.png',
						title:'学校部门',
						page:'/pages/encyclopedia/encyclopediaList'
					},
					{
						icon:'/static/union.png',
						title:'学生组织',
						page:'/pages/encyclopedia/encyclopediaList'
					},
					{
						icon:'/static/club.png',
						title:'社团组织',
						page:'/pages/encyclopedia/encyclopediaList'
					},
				],
			}
		},
		onPullDownRefresh: function() {
			uni.removeStorageSync('StorageeventList')
			this.eventList = [],
				this.getevent(),
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
		},
		created() {
			this.getevent();
		},
		methods: {
			getevent() {
				uni.request({
					url: 'https://127.0.0.1/data/getshowevent.php',
					method: 'POST',
					header: {
						'content-type': 'application/json',
					},
					success: (res) => {
						this.eventList = res.data,
							uni.setStorageSync("StorageeventList", this.eventList)
						const countList = this.eventList
						var tzoffset = (new Date()).getTimezoneOffset() * 60000;
						let today = (new Date(Date.now() - tzoffset)).toISOString().slice(0, 10);
						this.news = countList.filter(event => event.status == 1 && event.CreateTime.slice(0,
							10) == today).length;
						this.effectiveList = this.eventList.filter(item => item.status != 0);
						this.effectiveList = this.effectiveList.slice().sort((a, b) => {
							return new Date(b.hot) - new Date(a.hot);
						});
						this.neweventList = this.eventList.filter(item => item.status != 0 && item.CreateTime
							.slice(0, 10) == today);
					}
				})
			},
			toeventList(entry) {
				if (entry === 1) {
					uni.navigateTo({
						url: '/pages/particular/eventList?status=0'
					})
				}
				if (entry === 2) {
					uni.navigateTo({
						url: '/pages/particular/eventList?status=1'
					})
				}
			},
			tostudy() {
				uni.navigateTo({
					url: '/pages/document/study'
				})
			},
			toformdownload() {
				uni.navigateTo({
					url: '/pages/document/download_layout?title=各类表格'
				})
			},
			tonoticedownload() {
				uni.navigateTo({
					url: '/pages/document/download_layout?title=通知文件'
				})
			},
			tofunc(path,title){
				uni.navigateTo({
					url: `${path}?title=${title}`
				})
			},
		}
	}
</script>

<style>
	template {
		height: 100%;
		width: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
		background: linear-gradient(135deg, #007aff 0%, #43a2f8 30%, #ffffff 100%);
	}

	.titlebox {
		top: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 21px;
		margin-bottom: 23px;
		letter-spacing: 1px;
	}

	.my_work_box {
		margin: 13% 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
	}

	.public_box {
		height: calc(100vh - 130px);
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		box-sizing: border-box;
		align-items: center;
	}

	.function_line {
		justify-content: space-between;
		width: 92%;
		height: 60px;
		display: flex;
		flex-direction: row;
		text-align: center;
		background: white;
		margin: 0 10px;
		border-radius: 12px;
		white-space: nowrap;
		overflow: hidden;
		backface-visibility: hidden;
		padding: 0 10px;
	}

	.function_item {
		justify-content: center;
		display: inline-block;
		vertical-align: middle;
		width: 50px;
		background-color: white;
		border-radius: 16px;
	}

	.thing_box {
		border-radius: 16px;
		display: flex;
		flex-direction: column;
		width: 97%;
		background-color: #f8f8f8;
		margin: 10px auto 50rpx auto;
		height: 640rpx;
	}

	.thing_item {
		display: flex;
		flex-direction: column;
		width: 96%;
		background-color: white;
		border-radius: 16px;
		height: 150px;
		margin: 10px 2% 0;
		box-shadow: rgba(200, 200, 222, 0.2) 0px 7px 29px 0px;
	}

	.thing_title {
		color: gray;
		font-size: 15px;
		margin: 10px 5px 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.things {
		font-size: 15px;
		margin: 5px 5px;
		display: flex;
		flex-direction: row;
	}

	.meg_box {
		justify-content: center;
		align-items: center;
		text-align: center;
		display: flex;
		flex-direction: row;
		height: 110px;
		width: 50%;
		background-color: white;
		border-radius: 16px 0 0 16px;
	}

	.meg_box_second {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 55px;
		justify-content: center;
		align-items: center;
		background-color: #4AA6F8;
		margin-left: auto;
		border-radius: 0 16px 0 0;
	}

	.meg_box_third {
		text-align: center;
		align-items: center;
		justify-content: center;
		display: flex;
		width: 100%;
		height: 55px;
		background-color: #007aff;
		border-radius: 0 0 16px 0;
	}

	.func_item {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		text-align: center;
		margin: 5px 0;
	}
</style>